<template>
    <div class="wrapper">
        <div class="header">
            <mt-header title="新股申购">
                <div slot="left" @click="$router.go(-1)">
                    <mt-button icon="back">后退</mt-button>
                </div>
            </mt-header>
        </div>

        <mt-navbar v-model="selected">
            <mt-tab-item id="1" @click.native="$router.replace('/stockNew')">新股列表</mt-tab-item>
            <mt-tab-item id="2" @click.native="$router.replace('/stockNewOrder')">我的申购</mt-tab-item>
        </mt-navbar>

        <div class="_stock-new-list">
            <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                <li class="cell" v-for="(item,index) in list" :key="item.key">
                    <div class="flex">
                        <div class="flex-1">
                            <div class="_lable">新股名称</div>
                            <div class="_value">{{item.stockName}}</div>
                        </div>
                        <div class="flex-1">
                            <div class="_lable">发行价格</div>
                            <div class="_value">{{item.buyOrderPrice}}</div>
                        </div>
                        <div class="flex-1">
                            <div class="_lable">申购数量</div>
                            <div class="_value">{{item.orderNum}}</div>
                        </div>
                    </div>
                </li>
            </ul>
            <div v-show="loading" class="load-all text-center">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </div>
            <div v-show="!loading" class="load-all text-center">
                已全部加载
            </div>
        </div>
    </div>
</template>

<script>
    import {
        Toast
    } from 'mint-ui'
    import * as api from '@/axios/api'

    export default {
        props: {},
        data() {
            return {
                selected: '2',

                loading: false,
                list: [],
                pageNum: 1,
                pageSize: 10,
                total: 0
            }
        },
        watch: {},
        computed: {},
        created() {},
        mounted() {
            this.getList()
        },
        methods: {
            async getList() {
                let opts = {
                    pageNum: this.pageNum,
                    pageSize: 10
                }
                let data = await api.stockNewOrder(opts)
                if (data.status === 0) {
                    data.data.list.forEach(element => {
                        this.list.push(element)
                    })
                    this.total = data.data.total
                } else {
                    Toast(data.msg)
                }
            },
            async loadMore() {
                if (this.list.length < this.pageSize || this.total <= this.pageNum * this.pageSize) {
                    return
                }
                this.loading = true
                this.pageNum++
                await this.getList()
                this.loading = false
            },
        },
    }
</script>
